<template>
    <div class="rightChart">
    <h4>每月注册用户数量</h4>
    <div id="mainBar" style="width: 100%;height: 400px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { postAjax, getAjax } from "../../../api/api.js";
export default {
  name: "",
  data() {
    return {
      TypeCountData: [],
      countData: [],
      charts: ""
    };
  },
  methods: {
    getRegisterCount() {
      this.$Loading.start();
      getAjax("/policyInfo/getRegisterCount").then(response => {
        if (response.data.code === 0) {
          this.$Loading.finish();
          this.TypeCountData = [];
          this.countData = [];
          let _this = this;
          response.data.obj.forEach(element => {
            _this.TypeCountData.push(element.month);
            _this.countData.push(element.count);
          });
          this.Pie("mainBar");
        } else {
          this.$Loading.error();
          this.$Message.warning("数据请求异常");
        }
      });
    },
    Pie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
           width:"95%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.TypeCountData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0,
              rotate:40,
              textStyle: {
                fontSize: 12,
                color: "#000"
              }
            }
          },

        ],
        yAxis: [

          {
            type: "value"
          },

        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "40%",
            data: this.countData,
            itemStyle: {
              normal: {
                color: function(params) {
                  // build a color map as your need.
                  var colorList = [
                    "#2299ee",
                    "#fba259",
                    "#2299ee",
                    "#fba259",
                    "#2299ee",
                    "#fba259",
                    "#2299ee",
                    "#fba259",
                    "#2299ee",
                    "#fba259",
                    "#2299ee",
                    "#fba259"
                  ];
                  return colorList[params.dataIndex];
                },
                label: {
                  show: false,
                  position: "top",
                  formatter: "{c}%"
                }
              }
            }
          }
        ]
      });
    }
  },
  //调用
  mounted() {
    // this.$nextTick(function() {

    // });
    this.getRegisterCount();
  }
};
</script>
<style>
.rightChart {
  float: right;
}
.rightChart {
  position: relative;
  padding-left: 10px;
  padding-bottom: 20px;
}
.rightChart h4 {
  color: #333;
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 16px;
  display: inline-block;
  font-weight: 500;
}
</style>
